<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<style type="text/css">
		span{
			display: inline-block;
			width: 30px;height: 30px;
			text-align: center;line-height: 30px;
			border: 1px solid #cccccc;
			color: green;
		}
		.on{
			background-color: #008000;
			color: white;
		}
	</style>
    <!--react的核心库-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!--react的与dom相关的一些功能-->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!--将浏览器不支持的jsx语法转化为js语法-->
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>
<body>
      <div id="root"></div>    
</body>

</html>
<script type="text/babel">
      var data=[1,2,3,4,5,6,7,8,9,10]
	  var myIndex=0
	  
	  let clickFn=(index)=>{
		 myIndex=index
		 render()
	  }
	  
	  let render=()=>{
		  ReactDOM.render(
			  <div>
				  {
					  data.map((val,index)=>{
						 if (index==myIndex) {
							return <span className="on" key={index} onClick={self.clickFn.bind(this,index)}>{val}</span>
						 } else{
							return <span key={index} onClick={self.clickFn.bind(this,index)}>{val}</span>
						 }
						 
					  })
				  }
			  </div>,
			  document.getElementById("root")  
		  )
	  }
	  render()
	  
	  
     
      
     

</script>